<template>
	<aside>
		<div class="panel panel-bg hidden-xs" v-if="list.length && show">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-tree-deciduous newicon"></span> 雁过留声
				<span class="panel-remove glyphicon glyphicon-remove-circle" @click="show = false"></span>
			</div>
			<ul class="list-group list-group-flush">
				<li class="list-group-item" v-for="item in list">
					<span class="author-avatar">
						<img :src="item.user.avatar" class="avatar avatar-40 photo" height="40" width="40" :onerror="defaultAvatar" @click="routeToUser(item.user.name)">
					</span>
					<span class="comment-log">
						<a href="javascript::void(0)">
							{{item.content}}
						</a>
					</span>
				</li>
			</ul>
		</div>
	</aside>
</template>
<script>
	import logoSrc from './static/default.jpg'

	export default {
		data() {
			return {
				list: [],
				show: true,
				defaultAvatar: "this.src = '" + logoSrc + "'"
			}
		},
		created() {
			this.__getList();
		},
		methods: {
			routeToUser(name) {
				this.$router.push({
					name: 'user',
					params: {
						name: name
					}
				})
			},
			__getList() {
				this.$http.get('randReply').then((response)=> {
					this.list = response.data.data;
				})
			}
		}
	}
</script>

<style lang="scss" scope>
	.panel {
		.list-group {
		    max-height: 500px;
		    overflow: hidden;
		    width: 100%;
		    -webkit-transition: all .3s ease;
		    -moz-transition: all .3s ease;
		    -o-transition: all .3s ease;
		    transition: all .3s ease;
		    .list-group-item {
		    	.author-avatar {
		    		.avatar {
						cursor: pointer;
					    border-radius: 50%;
					    border: 1px solid #eee;
					    position: relative;
					    z-index: 99;
					    float: left;
					    display: block;
					    -webkit-transition: all .3s ease;
					    -moz-transition: all .3s ease;
					    -o-transition: all .3s ease;
					    transition: all .3s ease;
					}
		    	}
		    	.comment-log {
				    line-height: 20px;
				    background-color: #eee;
				    border-color: #eee;
				    border-radius: 4px;
				    display: inline-block;
				    padding: 8px;
				    margin-left: 10px;
				    white-space: nowrap;
				    text-overflow: ellipsis;
				    overflow: hidden;
				    width: 80%;
				}
		    }
		}
	}
</style>